<template>
  <el-card style="width: 100%;">
    <div slot="header">
      <span>transform 面板</span>
      <el-button style="float: right; padding: 0" type="text" @click="reset"
        >重置</el-button
      >
    </div>
    <div class="gl-flex-row gl-flex-space-between">
      <div id="experiment">
        <div ref="block" id="block">正</div>
      </div>
      <!-- 控制 -->
      <div class="gl-flex-row">
        <!-- 旋转控制 -->
        <div style="width: 300px">
          <p>旋转</p>
          <span>rotate-x: {{ rotateXVal }}</span>
          <el-slider
            v-model="rotateXVal"
            :min="-360"
            :max="360"
            show-input
            @change="transformBlock"
          ></el-slider
          ><span>rotate-y: {{ rotateYVal }}</span>
          <el-slider
            v-model="rotateYVal"
            :min="-360"
            :max="360"
            show-input
            @change="transformBlock"
          ></el-slider
          ><span>rotate-z: {{ rotateZVal }}</span>
          <el-slider
            v-model="rotateZVal"
            :min="-360"
            :max="360"
            show-input
            @change="transformBlock"
          ></el-slider>
        </div>
        <!-- 偏移控制 -->
        <div style="width: 300px; margin-left: 20px">
          <p>偏移</p>
          <span>translate-x: {{ translateXVal }}</span>
          <el-slider
            v-model="translateXVal"
            :min="-360"
            :max="360"
            show-input
            @change="transformBlock"
          ></el-slider
          ><span>translate-y: {{ translateYVal }}</span>
          <el-slider
            v-model="translateYVal"
            :min="-360"
            :max="360"
            show-input
            @change="transformBlock"
          ></el-slider
          ><span>translate-z: {{ translateZVal }}</span>
          <el-slider
            v-model="translateZVal"
            :min="-360"
            :max="360"
            show-input
            @change="transformBlock"
          ></el-slider>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      rotateXVal: 45,
      rotateYVal: 0,
      rotateZVal: 0,
      translateXVal: 0,
      translateYVal: 0,
      translateZVal: 0
    }
  },
  methods: {
    /**
     * @author: lihaogn
     * @Date: 2022-05-15 17:44:34
     * @description: 重置
     * @param {*}
     * @return {*}
     */

    reset() {
      Object.assign(this, {
        rotateXVal: 45,
        rotateYVal: 0,
        rotateZVal: 0,
        translateXVal: 0,
        translateYVal: 0,
        translateZVal: 0
      })
      this.$refs.block.style.transform = `rotateX(45deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px)`
    },
    /**
     * @author: lihaogn
     * @Date: 2022-05-15 17:44:41
     * @description: 变化事件
     * @param {*} val
     * @return {*}
     */

    transformBlock(val) {
      // document.getElementById("block").style.transform = "rotateX(" + val + "deg)";
      this.$refs.block.style.transform = `rotateX(${this.rotateXVal}deg) rotateY(${this.rotateYVal}deg) rotateZ(${this.rotateZVal}deg) translateX(${this.translateXVal}px) translateY(${this.translateYVal}px) translateZ(${this.translateZVal}px)`
    }
  }
}
</script>

<style lang="less" scoped>
#experiment {
  perspective: 800px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;

  #block {
    width: 300px;
    height: 300px;
    line-height: 300px;
    background-color: #69c;
    text-align: center;
    font-size: 20px;
    color: #fff;

    transform: rotateX(45deg);
    transition: transform 1s linear;
  }
}
</style>
